<template>
  <div class="usdt-page">
    <div class="usdt-content">
      <div class="usdt-icon">
        <img src="@/assets/images/usdt.png" alt="USDT" />
      </div>
      <div class="title">{{ t("usdt_payAmount") }}</div>
      <div class="amount">{{ amount }} USDT-TRC20</div>
      <div class="countdown">
        {{ t("usdt_payCountdown") }} <span>{{ formatTime(countdown) }}</span>
      </div>

      <div class="info-list">
        <div class="info-item">
          <div class="label">{{ t("usdt_depositAmount") }}</div>
          <div class="value">COP{{ formatNumber(depositAmount) }}</div>
        </div>
        <div class="info-item">
          <div class="label">{{ t("usdt_orderNo") }}</div>
          <div class="value">{{ orderId }}</div>
        </div>
        <div class="info-item">
          <div class="label">{{ t("usdt_networkType") }}</div>
          <div class="value">{{ network }}</div>
        </div>
        <div class="info-item address-item">
          <div class="label">USDT-TRC20</div>
          <div class="value">{{ address }}</div>
        </div>
      </div>

      <div class="qr-code">
        <img :src="qrCodeUrl" alt="QR Code" />
      </div>

      <div class="tips">
        {{ t("usdt_safetyTip") }}
      </div>

      <div class="guide">
        <div class="guide-title">{{ t("usdt_guide") }}</div>
        <div class="guide-item">1.{{ t("usdt_rateTip") }} 1USDT=COP16,500.</div>
        <div class="guide-item">
          2.{{ t("usdt_payTip") }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { useRoute } from "vue-router";
import QRCode from "qrcode";
import { formatNumber } from "@/utils/public";

const route = useRoute();
const amount = ref("6.7340");
const depositAmount = ref("111,111");
const orderId = ref("66361807952");
const network = ref("TRX");
const address = ref("TNQvpmxCpqYP7NfvKrC4b3nYoypmwvewzr");
const countdown = ref(1800); // 30分钟倒计时
const qrCodeUrl = ref("");
const { t } = useI18n();
const timer = ref(null);

const formatTime = (seconds: number) => {
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = seconds % 60;
  return `${minutes.toString().padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}:31`;
};

const startCountdown = () => {
  timer.value = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--;
    } else {
      clearInterval(timer.value);
    }
  }, 1000);
};

const generateQRCode = async () => {
  try {
    qrCodeUrl.value = await QRCode.toDataURL(address.value);
  } catch (err) {
    console.error("QR Code generation error:", err);
  }
};

onMounted(() => {
  startCountdown();
  generateQRCode();
});

onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value);
  }
});
</script>

<style scoped>
.usdt-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  overflow: hidden;
  font-size: 17px;
  color: #f6eade;
  background: url("../../../assets/images/login/topBg.png") no-repeat top;
  background-size: 100% auto;
}

.usdt-content {
  width: calc(100% - 34px);
  overflow: hidden;
  padding: 0 17px 34px 17px;
  margin: 11px 17px 0 17px;
  background: linear-gradient(
    180deg,
    rgba(254, 242, 230, 0) 4%,
    rgba(254, 237, 221, 0.1) 63%
  );
  border-radius: 18px;
}

.usdt-icon {
  text-align: center;
}

.usdt-icon img {
  width: 86px;
  height: 86px;
}

.title {
  font-size: 16px;
  color: rgb(153, 153, 153);
  margin-top: -11px;
  text-align: center;
}

.amount {
  font-size: 19px;
  color: red;
  font-weight: bold;
  margin-top: 5px;
  text-align: center;
}

.countdown {
  font-size: 14px;
  margin-top: 11px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.countdown span {
  margin-left: 3px;
  line-height: 22px;
  font-size: 16px;
  color: #f39800;
  font-weight: 700;
}

.info-list {
  margin-top: 17px;
  font-size: 13px;
  margin-left: -11px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 11px;
  border-bottom: 0.5px dashed rgba(153, 153, 153, 0.4);
}

.info-item .label {
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  flex: 0 0 33.3333%;
  margin-left: 0%;
  color: rgb(153, 153, 153);
}

.info-item .value {
  padding-left: 0px;
  padding-right: 0px;
  align-items: stretch;
  justify-content: flex-start;
  text-align: right;
  flex: 0 0 66.6667%;
  margin-left: 0%;
  font-weight: bold;
  font-size: 14px;
}
.address-item .label {
  flex: 0 0 25%;
}
.address-item .value {
  flex: 0 0 75%;
  font-size: 12px;
}
.qr-code {
  text-align: center;
  margin-top: 17px;
}

.qr-code img {
  width: 160px;
  height: 160px;
  border-radius: 5px;
}

.tips {
  font-size: 12px;
  color: rgb(153, 153, 153);
  padding-top: 5px;
}

.guide {
  width: 100%;
  margin-top: 17px;
  overflow: hidden;
  padding: 8px 0px;
  background: url("../../../assets/images/tipBg.png") no-repeat top;
  background-size: 100% 100%;
}

.guide-title {
  color: transparent;
  background: linear-gradient(117deg, #f9f3ed 13%, #fad4b7 89%), #ffe6ce;
  font-weight: 700;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.guide-item {
  padding: 5px 0 0 0;
  font-size: 13px;
  color: rgba(246, 234, 222, 0.4);
}

.guide-item:nth-child(3) {
  color: red;
}
</style>
